<template>
  <div>
    <div class="MyNew">
      <vue-canvas-poster
        :widthPixels="750"
        :painting="painting"
        @success="posterSuccess"
        @fail="posterFail"
      ></vue-canvas-poster>
      <img :src="paintingImg" alt="" />
      <div class="mynew_btn" v-if="showDown" @click="download">
        <span>下载保存</span>
      </div>
      <div class="mynew_btn" v-else>
        <span>长按识别二维码</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      painting: {},
      paintingImg: "",
      userInfo:
        localStorage.userInfo && localStorage.userInfo != ""
          ? JSON.parse(localStorage.userInfo)
          : null,
      contentText: "",
      img: "",
      qrCode: "",
      showDown: true,
    };
  },
  mounted() {
    this.getImg();
    this.getContentText();
    this.getCanvasBase64(this.$imgUrl + this.userInfo.qrCodeImgUrl, "qrCode");
  },
  methods: {
    //下载图片
    download() {
      // const a = document.createElement("a");
      // let url = this.paintingImg
      // a.href = url;
      // a.setAttribute('download', 'chart-download');
      // a.style.display = "none";
      // document.body.appendChild(a);
      // a.click();
      // URL.revokeObjectURL(a.href);
      // document.body.removeChild(a);
      this.$toast('请长按保存图片')
    },
    //获取背景图
    getImg() {
      let _self = this;
      this.$Api
        .getMetaByKey({
          key: "posterImgUrl",
        })
        .then((res) => {
          if (res.code == 1) {
            _self.getCanvasBase64(_self.$imgUrl + res.data.value, "img");
          }
        });
    },
    //获取文本
    getContentText() {
      let _self = this;
      this.$Api
        .getMetaByKey({
          key: "posterInfo",
        })
        .then((res) => {
          if (res.code == 1) {
            _self.contentText = res.data.value;
            _self.$nextTick(() => {
              _self.makeImg();
            });
          }
        });
    },
    getBase64Image(img, width, height) {
      var canvas = document.createElement("canvas");
      canvas.width = width ? width : img.width;
      canvas.height = height ? height : img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      var dataURL = canvas.toDataURL();
      return dataURL;
    },
    getCanvasBase64(img, key) {
      var image = new Image();
      let _self = this;
      //至关重要
      image.crossOrigin = "Anonymous";
      image.src = img;
      //至关重要
      if (img) {
        image.onload = () => {
          _self[key] = _self.getBase64Image(image); //将base64传给done上传处理
          _self.$nextTick(() => {
            _self.makeImg();
          });
          //document.getElementById("container2").appendChild(image);
        };
        //问题要让onload完成后再return sessionStorage['imgTest']
      }
    },
    // 海报生成成功
    posterSuccess(src) {
      this.paintingImg = src;
    },
    // 海报生成失败
    posterFail(err) {
      console.log("海报生成失败", err);
    },
    makeImg() {
      this.painting = {
        width: "750px",
        height: "1230px",
        background: "#fff",
        views: [
          {
            type: "image",
            url: this.userInfo.avatar, //头像
            css: {
              width: "120px",
              height: "120px",
              top: "44px",
              left: "24px",
              borderRadius: "60px",
            },
          },
          {
            type: "text",
            text: this.userInfo.nick, //用户名
            css: {
              top: "90px",
              maxLines: "2",
              left: "171px",
              fontSize: "32px",
              color: "#333",
              fontWeight: "bold",
            },
          },
          {
            type: "image",
            url: this.img, //主要图片
            css: {
              width: "702px",
              height: "962px",
              top: "189px",
              left: "24px",
            },
          },
          {
            type: "image",
            url: this.qrCode, //二维码
            css: {
              width: "202px",
              height: "202px",
              bottom: "78px",
              right: "24px",
            },
          },
          {
            type: "text",
            text: this.contentText, //文本介绍
            css: {
              width: "699px",
              top: "1180px",
              left: "22px",
              lineHeight: "40px",
              fontSize: "28px",
              color: "#999",
            },
          },
        ],
      };
    },
  },
};
</script>

<style scoped>
.MyNew {
  padding: 0 24px;
  padding-bottom: 114px;
  box-sizing: border-box;
}
.MyNew img {
  width: 100%;
}
.MyNew .mynew_head {
  height: 185px;
  width: 100%;
  display: flex;
  align-items: center;
}

.MyNew .mynew_head img {
  width: 120px;
  height: 120px;
  border-radius: 100%;
  margin-right: 10px;
}
.MyNew .mynew_main {
  display: block;
}
.MyNew .mynew_main {
  width: 100%;
}
.MyNew .mynew_main img {
  width: 100%;
}
.MyNew .mynew_text {
  margin: 10px 0;
}
.MyNew .mynew_btn {
  text-align: center;
  display: block;
  width: 100%;
  height: 95px;
  line-height: 95px;
  border-radius: 50px;
  color: #ffffffff;
  background: rgb(248, 135, 27);
}
</style>